<!--
 * @Author: 刘东升
 * @Date: 2021-07-14 17:24:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-01 13:41:54
 * @Descripttion:
 * @version:
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-collapse v-model="activeNames">
        <el-collapse-item title="任务记录" name="1">
            <template slot="title">
              <span class="collapse-title" slot="title">
                任务记录
              </span>
            </template>
            <div class="mod-demo__news">
              <div class="table_tool_box">
                  <!-- <el-form :inline="true" :model="dataForm" class="demo-form-inline" @keyup.enter.native="getDataList()">
                  <el-form-item label="记录名称">
                      <el-input v-model="dataForm.name" placeholder="记录名称" clearable />
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" plain @click="addOrUpdateHandle()">新增</el-button>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" plain @click="getDataList">查询</el-button>
                  </el-form-item>
                  </el-form> -->
              </div>
              <div class="table_box">
                  <el-table :data="dataList" border style="width: 100%; margin-bottom: 20px" @sort-change="commonSortChangeHandle">
                  <el-table-column align="center" label="记录名称" prop="name" />
                  <el-table-column align="center" label="记录状态" prop="state" width="240" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                      <el-tag :type="filterTagType(scope.row.state)" effect="plain">{{ filterState(scope.row.state) }}</el-tag>
                      </template>
                  </el-table-column>
                  <el-table-column align="center" label="执行结果" prop="result" />
                  <el-table-column align="center" label="更新时间" prop="createTime" />
                  </el-table>
              </div>
              <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle" />
            </div>
        </el-collapse-item>
        <el-collapse-item title="报告附件" name="3" v-if="$route.query.taskType == 2">
            <template slot="title">
              <span class="collapse-title" slot="title">报告附件</span>
            </template>
            <el-button type="primary" @click="hanleExport()">下载生成报告</el-button>
        </el-collapse-item>
        <el-collapse-item title="计算结果" name="2">
            <template slot="title">
              <span class="collapse-title" slot="title">计算结果</span>
            </template>
            <el-form ref="dataForm" position="top" :model="dataForm" label-width="130px">
              <el-form-item label="">
                  <h2>{{ dataForm.result ? dataForm.result : '暂无数据' }}</h2>
              </el-form-item>
            </el-form>
        </el-collapse-item>
    </el-collapse>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
    <state v-if="stateVisible" ref="state" @refreshDataList="getDataList" />
  </el-card>
</template>

<script>
import PageModule from '@/mixins/page-module'
import AddOrUpdateModule from '@/mixins/add-or-update-module'
import AddOrUpdate from './edit.vue'
import State from './state.vue'

import moment from 'moment'

import Cookies from 'js-cookie'

import { taskTrackPage } from '@/api/businessTask/api'

export default {
  components: {
    AddOrUpdate,
    State
  },
  mixins: [PageModule, AddOrUpdateModule],
  data() {
    return {
      dataList: [],
      activeNames: ['1'],
      dataForm: {
        id: ``,
        name: '',
        result:``
      },
      stateVisible: false,
      dataListURL: '/taskTrack/page',
    //   deleteURL: `/businessTask`,
      canUpdateDis: false
    }
  },
  created() {
    this.dataForm.result = this.$store.state.task.taskResult
  },
  methods: {
    //   时间格式化
    dateFormat(row,column){
        var date = row[column.property]; 
        if (date === undefined) { 
        return ""; 
        } 
        return moment(date).format("YYYY-MM-DD"); 
    },
    hanleExport() {
      const id = this.$route.query.taskId
      const url = process.env.VUE_APP_BASE_API
      window.open(`${url}businessTask/exportReport/${id}` + '?token=' + Cookies.get('token'))
    },
    hanleState(id, state) {
      this.stateVisible = true
      this.$nextTick(() => {
        this.$refs.state.dataForm.id = id
        // this.$refs.state.dataForm.state = state
        this.$refs.state.init()
      })
    },
    filterState(state) {
      switch (state) {
        case 1:
          return '开始'
        case 2:
          return '完成'
        case 3:
          return '已审核'
        case 4:
          return '已完成'
        default:
          return
      }
    },
    filterTagType(state) {
      switch (state) {
        case 1:
          return
        case 2:
          return 'success'
        case 3:
          return 'success'
        case 4:
          return 'danger'
        default:
          return
      }
    }
  }
}
</script>

<style scoped>
.collapse-title {
    flex: 1 0 90%;
    order: 1;
}
     
.el-collapse-item__header {
    flex: 1 0 auto;
    order: -1;
}

  #PointerIcon {
    transform:rotate(45deg) 
  }

</style>